<template>
  <div class="ai-chart" @click="isShow = !isShow,handleScroll()">
    <div class="ai-chart-btn" :class="{'ai-chart-btn-active': isShow}" v-clickOutside='clickOutside' >
      <div class="ai-chart-btn-content" v-show="isShow" @click.stop>
        <div class="ai-chart-btn-content-close" @click="isShow = false">
          <img src="../../assets/images/btn-close.svg" draggable="false" alt="">
        </div>
        <el-scrollbar ref="scrollbar" class="ai-chart-btn-content-scroll" >
          <!-- <div ref="title" class="ai-chart-btn-content-title">预设常见问题：{{ problem }}</div> -->
          <div ref="title" class="ai-chart-btn-content-title">AI生产管理小助手</div>
          <div ref="preset" class="ai-chart-btn-content-preset">
            <div 
              class="ai-chart-btn-content-preset-item" 
              v-for="(i,ind) in presetList" 
              :key="ind" 
              @click="handleClick(i)"
            >
              {{ i }}
            </div>

          </div>
          <div class="ai-chart-btn-content-item" v-for="(i,ind) in historyList" :key="ind">
            <div class="ai-chart-btn-content-item-question" v-if="i.type == 'question'">
              <div class="ai-chart-btn-content-item-question-content">
                {{ i.content }}
              </div>
              <img src="../../assets/images/aiChart/avatar.png" draggable="false" alt="">
            </div>
            <div class="ai-chart-btn-content-item-answer" v-if="i.type == 'answer'">
              <img src="../../assets/images/aiChart/ai-active.png" draggable="false" alt="">
              <div class="ai-chart-btn-content-item-answer-content">
                {{i.content}}
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div class="ai-chart-btn-content-footer">
          <el-input v-model="inputValue" type="textarea" placeholder="请输入问题" :autosize="{minRows: 1, maxRows: 3}" clearable @input="handleScroll"></el-input>
          <img src="../../assets/images/aiChart/send.png" draggable="false" alt="" @click='send'>
          <img src="../../assets/images/aiChart/reset.png" draggable="false" alt="" @click='reset'>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAnswer } from '@/api/mes/ai'
export default {
  name: 'AiChart',
  data() {
    return {
      isShow: false,
      problem: '',
      presetList: [
        // '未配货未发货订单编号有哪些？',
        '统计已审核的订单数？',
        "统计订单来源的淘宝的订单总数？",
        '统计锋鸟官方体验店的订单数量？',
        '统计销售订单数量？',
        '统计线下经销商的订单数量？',
        '统计全部发货的订单数？',
        '统计金额大于2000的订单数？',
        '统计金额大于2000且买家已付款的订单数量？',
      ],
      inputValue: '',
      historyList: [],
      repeatedSubmission: false, // 防止重复提交
    }
  },
  created() {

  },
  mounted() {
    // this.handleScroll()
  },
  methods: {
    send() {
      if(this.repeatedSubmission) return this.$message.warning('请耐心等待上一个问题回复完成后再提问！')
      this.repeatedSubmission = true
      this.problem = this.inputValue
      this.historyList.push({type:'question',content: this.inputValue})
      // todo:2024年11月11日15:20:45 暂定需求，直接返回数据，不调用接口
      getAnswer({question: this.inputValue, tableName: 'sale_order'}).then(res=>{
        // let resData = ''
        // res.data.forEach(element => {
        //   resData += Object.values(element)[0] + '\n'
        // });
        this.historyList.push({type:'answer', content: res.data})
        this.repeatedSubmission = false
        this.handleScroll()
        console.log(res);
      }).catch(err=>{
        this.historyList.push({type:'answer', content: '抱歉，未查询到~~'})
        this.repeatedSubmission = false
        this.handleScroll()
        console.log(err);
      })

      
      console.log('send');
    },
    reset() {
      this.inputValue = ''
      console.log('reset');
    },
    handleClick(i) {
      // this.problem = i
      this.inputValue = i
      this.send()
      console.log('click');
    },
    handleScroll() {
      this.$nextTick(() => {
        this.$refs.scrollbar.wrap.style.scrollBehavior = 'smooth';
        this.$refs.scrollbar.wrap.scrollTop = this.$refs.title.offsetHeight + this.$refs.preset.offsetHeight + 50
        console.log(this.$refs.title.offsetHeight, this.$refs.preset.offsetHeight)
      })
    },
    clickOutside(){
      this.isShow = false
    }
  }
}
</script>

<style scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
  height: 100%;
}
/deep/.el-textarea__inner{
  resize: none;
  border-color: #FF4500;
}
/deep/.el-textarea__inner::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  cursor: pointer;
  /* background: #000; */
}
/deep/.el-textarea__inner::-webkit-scrollbar-thumb {
	border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: #c3c3c3;
}
/deep/.el-textarea__inner::-webkit-scrollbar-track {
	background-color: transparent;
}
/deep/.el-scrollbar__bar.is-vertical > div {
  width: 100%;
  background-color: #ff4500;
}
</style>

<style lang="scss" scoped>
.ai-chart{
  display: flex;
  align-items: center;
  margin-right: 20px;
  &-btn{
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: relative;
    background-image: url('../../assets/images/aiChart/ai.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-active{
      background-image: url('../../assets/images/aiChart/ai-active.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    &-content{
      cursor: default;
      position: absolute;
      top: 45px;
      left: -150px;
      width: 460px;
      font-size: 14px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      z-index: 99999;
      box-shadow: 0px 0px 6px 0px rgba(160,160,160,1);
      // overflow-y: scroll;
      &::before{
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 3px;
        background-color: #ff4f0e;
        border-radius: 3px 3px 0 0;
      }
      &-close{
        display: flex;
        justify-content: flex-end;
        margin-right: 10px;
        cursor: pointer;
        width: 100%;
        height: 20px;
        img{
          width: 40px;
          height: 30px;
          z-index: 1;
          margin-top: 3px;
        }
      }
      &-scroll{
        height: 680px;
        width: 100%;
        padding: 5px 0 10px 10px;
      }
      &-title{
        line-height: 20px;
        text-align: center;
        font-size: 16px;
      }
      &-footer{
        display: flex;
        align-items: center;
        margin-top: 10px;
        height: 60px;
        background-color: #FFF8F6;
        padding: 10px;
        border-radius: 0 0 8px 8px;
        img{
          width: 32px;
          height: 32px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
      &-preset{
        padding: 10px;
        margin-bottom: 10px;
        &-item{
          width: fit-content;
          line-height: 25px;
          border-radius: 5px;
          padding: 0 8px;
          border: 1px solid #d9d9d9;
          margin-bottom: 10px;
          cursor: pointer;
          &:hover{
            background-color: #e6f7ff;
          }
        }
      }
      &-item{
        &-question{
          display: flex;
          justify-content: flex-end;
          margin-right: 10px;
          &-content{
            max-width: 90%;
            width: fit-content;
            padding: 5px 10px;
            line-height: 20px;
            color: #fff;
            background-color: #ff893a;
            border-radius: 15px 15px 0 15px;
            margin-bottom: 10px;
          }
          img{
            width: 32px;
            height: 32px;
            margin-left: 8px;
          }
        }
        &-answer{
          display: flex;
          justify-content: flex-start;
          &-content{
            max-width: 90%;
            width: fit-content;
            padding: 5px 10px;
            line-height: 20px;
            color: #3D3D3D;
            background-color: #FFF5EF;
            border: 1px solid #FFCFBD;
            border-radius: 15px 15px 15px 0;
            margin-bottom: 10px;
          }
          img{
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>